<template>
	<div class="father">
		<h3>父组件</h3>
		<h4>a：{{ a }}</h4>
		<h4>b：{{ b }}</h4>
		<h4>c：{{ c }}</h4>
		<h4>d：{{ d }}</h4>
		<!-- <Child :a="a" :b="b" :c="c" :d="d" v-bind="{ x: 100, y: 100 }" />
		等同于
		<Child :a="a" :b="b" :c="c" :d="d" :x="100" :y="100" /> -->

		<Child :a="a" :b="b" :c="c" :d="d" v-bind="{ x: 100, y: 100, editD: editD }" />
	</div>
</template>
<!-- 安装 vue 路由模块  npm install vue-router -->

<!-- npm i vite-plugin-vue-setup-extend -D -->
<script setup lang="ts" name="Father">
import Child from './Child.vue'
import { ref } from 'vue'

let a = ref(1)
let b = ref(2)
let c = ref(3)
let d = ref(4)

function editD(val: number) {
	d.value = val
}
</script>

<style scoped>
.father {
	background-color: rgb(165, 164, 164);
	padding: 20px;
	border-radius: 10px;
}
</style>
